<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*
        设置总的进度条的长，宽
        */
        #progress{
            width: 300px;
            height: 45px;
            background-color: gainsboro;
        }
        #position{
            width: 0;
            height: 100%;
            position: relative;
        }
        #circle{
            width: 50px;
            height: 45px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            right: -50px;
            top: 0;

        }
    </style>
</head>
<body>
<input type="button" value="点击播放视频" id="btn">
<input type="button" value="点击暂停视频" id="pause">
     <video src="vedio/vedio.mp4" id="vedio" ></video>
     <!-- 全屏播放-->
     <input type="button" value="全屏播放" id="full">
     <!-- 时间进度-->
     <div>
         <span id="current">00:00</span>/
         <span id="time">00:00</span>
     </div>
     <!-- 进度条-->
     <div id="progress">
         <div id="position">
             <span id="circle"></span>
         </div>
     </div>
<script type="text/javascript">
    var btn=document.getElementById("btn");
    var pause=document.getElementById("pause");
    //点击事件的处理
    var full=document.getElementById("full");
    var video=document.getElementById("vedio");
    var current=document.getElementById("current");
    var time=document.getElementById("time");
    //进度条
    var progress=document.getElementById("progress");
    var position=document.getElementById("position");
    btn.onclick=function(){
        vedio.play();

    }
    pause.onclick=function(){
        vedio.pause();

    }
    //addEventListener()------给元素添加监听事件
    video.addEventListener("canplay",function(){
        full.onclick=function(){
            //如果视频支持全屏这个属性，那么直接调用全屏的方法
            if(video.requestFullscreen){
                video.requestFullscreen();
            }if(video.webkitRequestFullScreen){
                video.webkitRequestFullScreen();
            }if(video.mozRequestFullScreen){
                video.mozRequestFullScreen();
            }
        };
        video.addEventListener("timeupdate",function(){
            current.innerHTML=changeTime(video.currentTime);
            time.innerHTML=changeTime(video.duration);
            //进度条的实时更新，随着当前时间在变化，那么当前时间/总的时间 比率在变化，那么
            //进度条的宽度的比率也在变化
            position.style.width=(video.currentTime/video.duration)*100+"%";
            console.log(position.style.width);
        });

        function changeTime(time){
            var m=Math.floor(time/60);
             m<10?m="0"+m:m;
            var s=Math.floor(time%60);
             s<10?s="0"+s:s;
            return m+":"+s;
        }
        //给进度条添加点击事件，传递进来参数当前获取到的事件目标
        progress.onclick=function(e){
             var e=e||window.event;//获取当前的事件
             //获取当前事件的x坐标
             var x= e.offsetX;
            //获取到的是整个元素的宽度
             var w=this.offsetWidth;
            console.log("当前x轴的坐标"+x);
            console.log("当前元素的宽度"+w);
            position.style.width=(x/w)*100+"%";
            //绑定时间进度跟我的进度条是一致的
            video.currentTime = video.duration*(x/w);
        }


    });






</script>
</body>
</html>